<template>  
  <view class="uni-container">  
    <!-- 操作工具栏 -->  
    <view class="uni-toolbar">  
      <button class="uni-button primary" @click="showAddDialog">  
        <text class="iconfont icon-add"></text> 新增合同  
      </button>  
      <!-- <button class="uni-button default" @click="handleExport">  
        <text class="iconfont icon-export"></text> 导出  
      </button>  -->
    </view>  

    <!-- 筛选表单 -->  
    <view class="uni-filter-box">  
      <view class="uni-filter-item">  
        <text class="uni-filter-label">客户名称</text>  
        <input class="uni-input" v-model="formData.clientName" placeholder="请输入客户名称" />  
      </view>  
      <view class="uni-filter-item">  
        <text class="uni-filter-label">合同类别</text>  
        <input class="uni-input" v-model="formData.contractType" placeholder="请输入合同类别" />  
      </view>  
      <view class="uni-filter-item">  
        <text class="uni-filter-label">业务经理</text>  
        <input class="uni-input" v-model="formData.businessManager" placeholder="请输入业务经理" />  
      </view>  
      <button class="uni-button search" @click="submitForm">  
        <text class="iconfont icon-search"></text> 搜索  
      </button>  
    </view>  

    <!-- 合同数据表格 -->  
    <uni-table ref="table" border stripe type="selection" :data="tableData" empty-text="暂无合同数据"  
      @selection-change="handleSelectionChange">  
      <uni-tr>  
        <uni-th width="100" align="center" v-for="(col, idx) in tableColumns" :key="idx">{{ col.title }}</uni-th>  
        <uni-th width="150" align="center">操作</uni-th>  
      </uni-tr>  
      
      <uni-tr v-for="(item, index) in tableData" :key="index">  
        <uni-td align="center" v-for="(col, colIdx) in tableColumns" :key="colIdx">  
          {{ item[col.prop] }}  
        </uni-td>  
        <uni-td align="center">  
          <view class="uni-group">  
            <button class="uni-button mini primary" @click="editRow(item)">修改</button>  
            <button class="uni-button mini danger" @click="deleteRow(item)">删除</button>  
          </view>  
        </uni-td>  
      </uni-tr>  
    </uni-table>  

    <!-- 分页组件 -->  
    <view class="uni-pagination-box">  
      <uni-pagination show-icon :page-size="formData.pageSize" :current="formData.pageNum" :total="total"  
        @change="handlePaginationChange" />  
    </view>  
  </view>  
</template>  
<script>  
import { add, list, update } from "@/api/Stipulation";  

export default {  
  data() {  
    return {  
      loading: false,  
      total: 0,  
      formData: {  
        pageNum: 1,  
        pageSize: 10,  
        clientName: '',  
        contractType: undefined,  
        businessManager: ''  
      },  
      tableData: [],  
      selectedRows: [],  
      addDialogVisible: false,  
      newContractForm: {  
        contractNumber: '',  
        contractName: '',  
        contractType: '',  
        customerName: '',  
        inspectionUnit: '',  
        signingType: '',  
        contractAmount: '',  
        actualAmount: '',  
        payType: '',  
        examineStatus: '',  
        createDate: '',  
        signingDate: '',  
        endDate: ''  
      },  
      editContractForm: {  
        contractNumber: '',  
        contractName: '',  
        contractType: '',  
        customerName: '',  
        inspectionUnit: '',  
        signingType: '',  
        contractAmount: '',  
        actualAmount: '',  
        payType: '',  
        examineStatus: '',  
        createDate: '',  
        signingDate: '',  
        endDate: ''  
      },  
      tableColumns: [  
        { prop: 'contractNumber', title: '合同编号', width: 100 },  
        { prop: 'contractName', title: '合同名称', width: 100 },  
        { prop: 'contractType', title: '合同类别', width: 100 },  
        { prop: 'customerName', title: '客户名称', width: 100 },  
        { prop: 'inspectionUnit', title: '受检单位', width: 100 },  
        { prop: 'signingType', title: '签订方式', width: 100 },  
        { prop: 'contractAmount', title: '合同金额', width: 100 },  
        { prop: 'actualAmount', title: '实收金额', width: 100 },  
        { prop: 'payType', title: '付款方式', width: 100 },  
        { prop: 'examineStatus', title: '审核状态', width: 100 },  
        { prop: 'createDate', title: '创建时间', width: 100 },  
        { prop: 'signingDate', title: '签订日期', width: 100 },  
        { prop: 'endDate', title: '结束日期', width: 100 }  
      ]  
    };  
  },  
  created() {  
    this.getData();  
  },  
  methods: {  
    // 获取数据  
    getData(pageCurrent) {  
      this.loading = true;  
      if (pageCurrent) this.formData.pageNum = pageCurrent;  
      
      list(this.formData).then(response => {  
		  console.log(response)
        this.tableData = response.rows;  
        this.total = response.total;  
        this.loading = false;  
      });  
    },  

    // 分页变化  
    changePage(e) {  
      this.getData(e.current);  
    },  

    // 搜索提交  
    submitForm() {  
      this.getData(1);  
    },  

    // 显示新增弹窗  
    showAddDialog() {  
      this.addDialogVisible = true;  
    },  

    // 提交新增合同  
    submitNewContract() {  
      add(this.newContractForm).then(response => {  
        if (response.msg === '操作成功') {  
          uni.showToast({ title: "新增成功", icon: 'success' });  
          this.getData();  
          this.addDialogVisible = false;  
          this.resetForm();  
        }  
      });  
    },  

    // 编辑行  
    editRow(row) {  
      this.editContractForm = { ...row };  
      uni.navigateTo({  
        url: '/pages/contract/edit?data=' + encodeURIComponent(JSON.stringify(row))  
      });  
    },  

    // 删除行  
    deleteRow(row) {  
      uni.showModal({  
        title: '警告',  
        content: `确定删除 ${row.contractNumber} 吗?`,  
        success: (res) => {  
          if (res.confirm) {  
            this.tableData = this.tableData.filter(item => item !== row);  
            uni.showToast({ title: '删除成功', icon: 'success' });  
          }  
        }  
      });  
    },  

    // 重置表单  
    resetForm() {  
      this.newContractForm = {  
        contractNumber: '',  
        contractName: '',  
        contractType: '',  
        customerName: '',  
        inspectionUnit: '',  
        signingType: '',  
        contractAmount: '',  
        actualAmount: '',  
        payType: '',  
        examineStatus: '',  
        createDate: '',  
        signingDate: '',  
        endDate: ''  
      };  
    },  

    // 导出数据  
    handleExport() {  
      this.download('client/Stipulation/export', {  
        ...this.formData  
      }, `contract_${new Date().getTime()}.xlsx`);  
    },  

    // 多选处理  
    handleSelectionChange(e) {  
      this.selectedRows = e.detail.value;  
    }  
  }  
};  
</script>
<style scoped>  
/* 页面容器 */  
.uni-container {  
  padding: 20rpx;  
  background: #f9f9f9;  
  min-height: 100vh;  
}  

/* 操作工具栏 */  
.uni-toolbar {  
  display: flex;  
  gap: 20rpx;  
  margin-bottom: 20rpx;  
}  

.uni-button {  
  flex: 1;  
  height: 64rpx;  
  line-height: 64rpx;  
  font-size: 28rpx;  
  text-align: center;  
  border-radius: 8rpx;  
}  

.primary {  
  background-color: #409eff;  
  color: #fff;  
  border: none;  
}  

.default {  
  background-color: #ffffff;  
  color: #333;  
  border: 1rpx solid #ddd;  
}  

.danger {  
  background-color: #f56c6c;  
  color: #fff;  
}  

.search {  
  background-color: #00c46c;  
  color: #fff;  
}  

/* 筛选表单 */  
.uni-filter-box {  
  display: flex;  
  flex-wrap: wrap;  
  margin-bottom: 20rpx;  
  background: #fff;  
  padding: 20rpx;  
  border-radius: 8rpx;  
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);  
}  

.uni-filter-item {  
  flex: 1;  
  display: flex;  
  flex-direction: column;  
  margin-right: 20rpx;  
}  

.uni-filter-label {  
  font-size: 26rpx;  
  color: #606266;  
  margin-bottom: 12rpx;  
}  

.uni-input {  
  height: 60rpx;  
  padding: 0 16rpx;  
  line-height: 60rpx;  
  border: 1rpx solid #dcdfe6;  
  border-radius: 4rpx;  
  font-size: 28rpx;  
  color: #606266;  
}  

/* 表格区域 */  
.uni-table {  
  margin-top: 20rpx;  
  background: #fff;  
  border-radius: 8rpx;  
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);  
}  

/* 分页组件 */  
.uni-pagination-box {  
  margin-top: 20rpx;  
  text-align: center;  
}  

/* 弹窗样式 */  
.dialog-container {  
  background: #ffffff;  
  padding: 30rpx;  
  border-radius: 16rpx;  
  width: 86%;  
  max-height: 80vh;  
  overflow-y: auto;  
}  

.dialog-title {  
  font-size: 36rpx;  
  color: #333333;  
  font-weight: bold;  
  margin-bottom: 20rpx;  
  text-align: center;  
}  

/* 表单内容 */  
.form-body {  
  display: flex;  
  flex-wrap: wrap;  
  gap: 20rpx;  
}  

.form-row {  
  width: 48%; /* 每行宽度占50%，两栏对齐 */  
  margin-bottom: 20rpx;  
}  

.form-label {  
  font-size: 28rpx;  
  color: #606266;  
  margin-bottom: 8rpx;  
}  

.form-input {  
  height: 60rpx;  
  padding: 0 20rpx;  
  border: 1rpx solid #dcdfe6;  
  border-radius: 8rpx;  
  font-size: 28rpx;  
}  

/* 弹窗底部按钮 */  
.dialog-footer {  
  margin-top: 20rpx;  
  display: flex;  
  justify-content: space-between;  
  gap: 20rpx;  
}  

.dialog-footer .uni-button {  
  flex: 1;  
  height: 60rpx;  
  line-height: 60rpx;  
  font-size: 28rpx;  
  text-align: center;  
  border-radius: 8rpx;  
}  

.cancel {  
  background-color: #e5e5e5;  
  color: #333333;  
}  

.confirm {  
  background-color: #409eff;  
  color: #ffffff;  
}  
</style>
